@import "variables";
@import "nib";
.nav {
  position: relative;
  margin: 0;
  padding: 0 0.5em;
  background: $color-nav-background;
  // -0.5em is the offset for main shadow.
  box-shadow: 0 -0.5em 1em 0.5em rgba(0, 0, 0, 0.19);
  border-radius: top $corner-radius;
  display: block;
  ul {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: auto;
    white-space: nowrap;
    li {
      line-height: 2em;
      position: relative;
      text-align: center;
      display: inline-block;
      margin: 0 0.1em;
      a {
        position: relative;
        display: block;
        font-size: 1.5em;
        padding: 0.75em;
        color: $color-nav-link-font;
        text-decoration: none;
        text-shadow: 0 0.05em rgba(0, 0, 0, 0.2);
        transition: 0.2s ease-in;
        border-bottom: none;
        &:hover {
          color: $color-nav-link-hover-font;
          background: $color-nav-hover-font;
        }
        &:active {
          top: 0;
        }
        &.current {
          color: $color-nav-link-hover-font;
          background: $color-nav-current-background;
        }
      }
    }
  }
  .nav-toggle {
    text-align: center;
    font-size: 2em;
    position: relative;
    cursor: pointer;
    color: $color-nav-link;
    display: none;
    width: 100%;
    text-align: center;
    border-bottom: none;
    &:hover {
      border-bottom: none;
      color: $color-nav-link-hover-font;
    }
  }
  @media (max-width: $media-footer-header-nav-fold-width) {
    .nav-toggle {
      display: block;
    }
    ul {
      display: none;
      li {
        display: block;
        text-align: center
        margin: 0.1em 0;
        a {
          position: relative;
          border-bottom: none;
          &:hover {
            color: $color-nav-link-hover-font;
            background: $color-nav-hover-font;
          }
        }
      }
    }
  }
}
